import jsPlumb from 'jsplumb'

export const jsplumbSetting:jsPlumb.Defaults = {
  /**
   * 连接线的默认样式
   * stroke 线条颜色
   * strokeWidth 宽度
   */
  PaintStyle: { stroke: '#56A7F9', strokeWidth: 1, fill: '2 2' },
  /**
   * 鼠标滑过连线样式
   * stroke 线条颜色
   * strokeWidth 宽度
   */
  HoverPaintStyle: { stroke: '#13E0F9', strokeWidth: 2 },
  /**
   * 连线终端点
   */
  Endpoint: ['Dot', { radius: 6 }],
  /**
   * 控制连线终端那个小点的样式
   */
  EndpointStyle: {
    fill: '#fff',
    stroke: '#56A7F9',
    strokeWidth: 5
  },
  /**
   * 控制鼠标滑过连线终端那个小点的样式
   */
  EndpointHoverStyle: { fill: '#fff', stroke: '#13E0F9' },
  /**
   * 连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight]
   */
  Connector: 'StateMachine',
  ConnectionOverlays: [
    ['Arrow', { location: 1, width: 11, length: 11, foldback: 0.618 }] // 连线设置箭头
  ]
}

// jsplumb连接参数
export const jsplumbConnectOptions = {
  isSource: true,
  isTarget: true,
  // 动态锚点、提供了4个方向 Continuous、AutoDefault
  anchor: [
    'TopCenter',
    'RightMiddle',
    'BottomCenter',
    'LeftMiddle'
  ]
}

export const jsplumbSourceOptions = {
  filter: '.node-anchor', // 触发连线的区域
  /* "span"表示标签，".className"表示类，"#id"表示元素id */
  filterExclude: false,
  anchor: [
    'TopCenter',
    'RightMiddle',
    'BottomCenter',
    'LeftMiddle'
  ],
  allowLoopback: false
}

export const jsplumbTargetOptions = {
  filter: '.node-anchor',
  /* "span"表示标签，".className"表示类，"#id"表示元素id */
  filterExclude: false,
  anchor: [
    'TopCenter',
    'RightMiddle',
    'BottomCenter',
    'LeftMiddle'
  ],
  allowLoopback: false
}
